<template>
  <div>
    <!-- 作用：遍历数组遍历对象 用于渲染 -->
    <h1>v-for指令</h1>
    <ul>
      <!-- 生成多个li 所以v-for写在li里面 -->
      <!-- 
        v-for 有报错提示 要加上:key（后续会学到）字符串或者数字 且希望是唯一值
        item in 数组名
        (item,index) in 数组名
       -->
      <li v-for="(item, index) in arr" :key="item">
        {{ item }} - 索引是 - {{ index }}
      </li>
    </ul>
    <hr />
    <ul>
      <!-- 形参名字可以自己定义，第一个形参 元素 第二个形参 下标
        不能换顺序 意思就是 第一个不是索引 第二个不是元素
       -->
      <li v-for="(el, idx) in arr" :key="idx">{{ el }} - {{ idx }}</li>
    </ul>
    <hr />
    <!-- 遍历对象，第一个形参是值 第二个形参是属性名（键） -->
    <ul>
      <li v-for="(v, k) in obj" :key="k">{{ k }} - {{ v }}</li>
    </ul>
    <hr />
    <!-- 遍历数字 -->
    <ul>
      <li v-for="item in count" :key="item">{{ item }}</li>
    </ul>
    <hr />
    <!-- 遍历对象数组 本质还是遍历数组 -->
    <ul>
      <li v-for="item in objArr" :key="item.name">
        {{ item.name }} - {{ item.age }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      arr: [1, 2, 3, 4, 5],
      obj: {
        a: 1,
        b: 2,
        c: 3,
      },
      count: 10,
      objArr: [
        { name: "zs", age: 10 },
        { name: "ls", age: 20 },
      ],
    };
  },
};
</script>

<style>
</style>